<script setup>
import {getUserInfo} from '@/utils/http'
import user from '@/store/user'
import {onMounted} from 'vue'

onMounted(() =>
  getUserInfo().then((resp) => {
    if (resp.success()) {
      user.login = true
      user.info = resp.data
    }
  })
)
</script>
<template>
  <nav class="header-nav">
    <img
      alt="Vue logo"
      class="logo"
      height="40"
      src="@/assets/logo.svg"
      width="40"
    />
    <RouterLink to="/">首页</RouterLink>
    <RouterLink to="/rent">租房</RouterLink>
    <RouterLink to="/person">个人中心</RouterLink>
    <RouterLink v-if="!user.login" class="login-btn" to="/login">登陆</RouterLink>
  </nav>
</template>

<style>
img {
  float: left;
}

.header-nav {
  margin-left: 20px;
  line-height: 46px;
}

nav a {
  margin: 0 20px;
}

.login-btn {
  float: right;
}
</style>

